<template>
	<view>
		<view class="uni-margin-wrap">
			<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
				:duration="500">
				<swiper-item v-if="actinfo.img" class="swiper-item" v-for="(item,index) in actinfo.img.split(',')" :key="index">
					<image mode="aspectFill" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="infobox">
			<view class="namebox">{{actinfo.activity_name}}</view>
			<view class="timebox"><text style="color: #555555;">活动时间：</text>{{dateFormat(actinfo.start_time)}}-{{dateFormat(actinfo.end_time)}}</view>
			<!-- <view class="timebox"><text style="color: #555555;">活动时间：</text>{{dateFormat(actinfo.start_time)}}-{{dateFormat(actinfo.end_time)}}</view> -->
		</view>
		<view class="actinfo">
			<view class="adderss">
				<view class="numbox">报名人数</view>
				<view class="numinfo">当前名额剩余<text style="color: #FF8A9B;font-size: 36rpx;">{{actinfo.leave_num}}</text>个</view>
			</view>
			<view class="adderss">
				<view class="numbox">活动地址</view>
				<view class="numinfo" @click="tomaps()"><image src="../../static/dw1.png"></image>{{actinfo.address}}{{actinfo.address_info}}</view>
			</view>
			<view class="adderss">
				<view class="numbox">活动类型</view>
				<!-- 1志愿者招募活动2普通活动 -->
				<view class="numinfo">{{actinfo.type==1?'志愿者招募活动':'普通活动'}}</view>
			</view>
		</view>
		<view class="textbox">
			<view>活动详情</view>
		</view>
		<view v-html="actinfo.desc"></view>
		<view style="height: 130rpx;"></view>
		<view class="navbut">
			<view class="kfbox" @click="tophone()">
				<image src="../../static/kf.png"></image>
				<view>客服</view>
				<!-- <button open-type="contact" ></button> -->
			</view>
			<view class="butbox" @click="todetail()" :style="{
				opacity:overflowTime()?'0.5':'1'
			}">{{overflowTime()?'活动已结束':'立即报名'}}</view>
		</view>
	</view>
</template>

<script>
	import jweixin from '../../utils/wxSdk.js'
	export default {
		data() {
			return {
				actinfo:{},//活动详情
			}
		},
		onLoad(option) {
			this.id = option.id
			this.getinfo()
			
		},
		methods: {
			overflowTime(){
				return Date.parse(new Date()) > this.actinfo.end_time * 1000
			},
			getinfo(){
				this.$http({
					url:'/api/Activity/detail',
					data:{
						id:this.id
					}
				}).then(res=>{
					this.actinfo = res.data
					this.share()
					this.actinfo.desc = this.$replace_Rich_text(res.data.desc)
				})
			},
			todetail(){
				if(this.overflowTime()){
					return
				}
				this.$http({//是否绑定过社区
					url:'/api/Course/user_info',
				}).then(res=>{
					this.myinfo = res.data
					////identity 1普通用户2志愿者3老师
					uni.navigateTo({
						url:'/pages/application/application?id=' + this.actinfo.id+'&type='+1//type 1活动，2课程
					})
					// if(this.myinfo.community_id){
					// 	uni.navigateTo({
					// 		url:'/pages/application/application?id=' + this.actinfo.id+'&type='+1//type 1活动，2课程
					// 	})
					// }else{
					// 	setTimeout(()=>{
					// 		uni.reLaunch({
					// 			url:'/pages/selectcommunity/selectcommunity'
					// 		})
					// 	},100)
					// }
				})
				
			},
			dateFormat: function(value) {
				var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000 selectcommunity
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			share() {
				// if (window.location.href.includes("pid")) {
				// 	if (!this.$route.query.pid) {
				// 		window.location.href = 'http://lajj.zxkjnc.com/h5/#?pid=' + this.myinfo.id
				// 	} else {
			
				// 	}
				// 	console.log(window.location.href)
				// } else {
				// 	window.location.href = 'http://lajj.zxkjnc.com/h5/#/?pid=' + this.myinfo.id
				// }
				this.$http({
					url: '/api/Course/user_info',
				}).then(res => {
					console.log(res.data.config)
					jweixin.wxshare({
						title: res.data.config.share_title||'',
						desc: res.data.config.share_content||'',
						link: 'https://mtang.zxkjnc.com/h5/#/?id=' + this.id || '',
						imgUrl: 'https://mtang.zxkjnc.com/logo.jpg',
					})
				})

				// console.log('成功调用')
				console.log('成功调用')
			},
			onShareAppMessage(res) {
			  if (res.from === 'button') {// 来自页面内分享按钮
			      console.log(res.target)
			  }
			  // return {
			  //   title: "邀请好友",
			  //   path: '/pages/index/index?pid='+this.id split
			  // }
			},
			onShareTimeline() {
			  // return {
			  //   title: '快乐生活，就到众享幸福家',
			  //   path: "/pages/actinfo/actinfo?id="+this.id
			  // }
			},
			tomaps(){
				uni.navigateTo({
					url:'/pageshop/maps/maps?longitude='+this.actinfo.longitude+'&latitude='+this.actinfo.latitude+'&address='+this.actinfo.address
				})
			},
			tophone(){
				// console.log(this.actinfo.phoneNumber)
				uni.makePhoneCall({
					phoneNumber:'18907082794'//仅为示例
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-margin-wrap {
		width: 750rpx;
		height: 460rpx;
	}
	.swiper {
			height: 460rpx;
		}
	.swiper-item {
		display: block;
		height: 460rpx;
		text-align: center;
		image{
			width: 100%;
			height: 460rpx;
		}
	}
	.infobox{
		background-color: #FFF;
		width: 690rpx;
		padding: 40rpx 30rpx;
		.namebox{
			font-size: 48rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #222222;
		}
		.timebox{
			font-size: 28rpx;
			font-family: Source Han Sans CN-Regular, Source Han Sans CN;
			font-weight: 400;
			color: #222222;
			margin-top: 30rpx;
		}
	}
	.actinfo{
		width: 690rpx;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 24rpx 0;
		.adderss{
			width: 690rpx;
			display: flex;
			align-items: center;
			height: 80rpx;
			.numbox{
				width: 188rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #666666;
				margin-right: 30rpx;
			}
			.numinfo{
				width: 502rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				image{
					width: 26rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
				// >view{
				// 	width: fit-content;
				// 	height: 56rpx;
				// 	background: #FFF9FA;
				// 	border-radius: 8rpx;
				// 	padding: 0 14rpx;
				// 	line-height: 56rpx;
				// }
				.time{
					width: 530rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin: 20rpx 0;
					>view{
						// height: 56rpx;
						background: #FFF9FA;
						border-radius: 8rpx ;
						width: fit-content;
						padding: 0 14rpx;
						// line-height: 56rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #222222;
					}
				}
			}
		}
	}
	.textbox{
		width: 690rpx;
		padding: 0 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 40rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #FF6178;
		background-color: #FFF;
	}
	.navbut{
		width: 750rpx;
		height: 110rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		align-items: center;
		.kfbox{
			width: 168rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #444444;
			text-align: center;
			position: relative;
			image{
				width:56rpx;
				height:56rpx;
			}
			>button{
				width: 168rpx;
				height: 90rpx;
				position:absolute;
				opacity: 0;
				border: none;
				// z-index: 99;
				top: 0;
			}
		}
		
		.butbox{
			width: 552rpx;
			height: 90rpx;
			background: #FF8A9B;
			border-radius: 46rpx;
			font-size: 30rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
		}
	}

</style>
